<template>
    <div
        class="wrapper"
        :style="`background: ${tabCurrent === 0 ? '#0e0e0e' : '#000000'} ${isonLoad ? 'show' : 'hide'}`"
    >
        <c-header />
        <div class="swipe_wrap">
            <van-Swipe :banner="banner[tabCurrent]" @onTapItem="onTapItem" className="a" />
        </div>
        <c-tabs :tabs="tabs" @change="tabChange" :current="tabCurrent" />
        <div v-show="tabCurrent === 0">
            <div class="type_wrap_0">
                <template v-for="(item, index) in tabs[0].info">
                    <c-card :key="index" :item="item" class="c_card" />
                </template>
            </div>
        </div>
        <!-- <div v-show="tabCurrent === 1">
            <c-live />
        </div> -->
        <div v-show="tabCurrent === 1">
            <c-life :info="tabs[1].info" @onTapLive="onTapLive" @onTapLiveMore="onTapLiveMore" />
        </div>
    </div>
</template>
<script>
import { isWeixinBrowser } from '../../utils/NetworkType'
import wxJsSDK from '../../utils/wx-js-SDK'
export default {
    data () {
        return {
            banner: [
                [
                    {
                        img: require('@/assets/images/banner-1.jpg'),
                        callback: () => {
                            console.log('11')
                        }
                    }
                    // ,
                    // {
                    //     img: require('@/assets/images/banner-2.jpg'),
                    //     callback: () => {
                    //         console.log('22')
                    //     }
                    // }
                ],
                // [
                //     {
                //         img: require('@/assets/images/banner-tabs1-1.jpg'),
                //         callback: () => {
                //             console.log('11')
                //         }
                //     }
                // ],
                [
                    {
                        img: require('@/assets/images/banner-tabs2-1.jpg'),
                        callback: () => {
                            console.log('11')
                        }
                    }
                ]
            ],
            tabs: [
                {
                    title: '理享放送',
                    info: [
                        {
                            title: '8月1日 · COLMO理享家沙龙',
                            footerTitle: 'COLMO理享家齐聚，以理性思考，解构生活之美',
                            overlay: false,
                            img: require('@/assets/images/type-0-img1.jpg'),
                            more: 'c-card-detail-a'
                        },
                        {
                            title: '8月12日 · COLMO《十三邀·夏日特别版》',
                            overlay: false,
                            img: require('@/assets/images/type-0-img2.jpg'),
                            // centerTitle: '许知远X张亚东 《主题主题主题》',
                            // centerStyle: 'top: 1.54rem',
                            footerTitle: '作家许知远对话音乐制作人张亚东',
                            more: 'c-card-detail-b'
                        },
                        {
                            title: '8月13日 · COLMO特邀《大内密谈》',
                            footerTitle: '人气音乐播客《大内密谈》解读《十三邀 · 夏日特别版》的“隐秘细节”',
                            overlay: true,
                            img: require('@/assets/images/type-0-img3.jpg'),
                            // centerTitle: '大内密谈陪你看《十三邀》',
                            // centerStyle: 'top: 1.26rem',
                            more: 'c-card-detail-c'
                        }
                    ]
                },
                // {
                //     title: '精彩直播',
                //     info: []
                // },
                {
                    title: 'COLMO生活',
                    info: {
                        imgArr: [
                            {
                                img: require('@/assets/images/type-2-img1.jpg'),
                                callback: () => {
                                    window.location.href = 'https://www.colmo.com.cn/index/Air-space-station-pro'
                                }
                            },
                            {
                                img: require('@/assets/images/type-2-img2.jpg'),
                                callback: () => {
                                    window.location.href = 'https://www.colmo.com.cn/index/Refrigerator'
                                }
                            },
                            {
                                img: require('@/assets/images/type-2-img3.jpg'),
                                callback: () => {
                                    window.location.href = 'https://www.colmo.com.cn/index/Washing-Machine'
                                }
                            },
                            {
                                img: require('@/assets/images/type-2-img4.jpg'),
                                callback: () => {
                                    window.location.href = 'https://www.colmo.com.cn/index/V7Pro'
                                }
                            },
                            {
                                img: require('@/assets/images/type-2-img5.jpg'),
                                callback: () => {
                                    window.location.href = 'https://www.colmo.com.cn/index/Water-fountain-Evo-series'
                                }
                            }
                        ],
                        more: [
                            {
                                img: require('@/assets/images/type-2-more1.jpg'),
                                title: 'COLMO TURING系列家用小空调',
                                callback: () => {
                                    window.location.href = 'https://www.colmo.com.cn/index/COLMO-TURING'
                                }
                            },
                            {
                                img: require('@/assets/images/type-2-more2.jpg'),
                                title: 'COLMO 熔熳岩十字冰箱',
                                callback: () => {
                                    window.location.href = 'https://www.colmo.com.cn/index/Refrigerator-CRBS513'
                                }
                            },
                            {
                                img: require('@/assets/images/type-2-more3.jpg'),
                                title: 'COLMO全时全驱洗衣机',
                                callback: () => {
                                    window.location.href = 'https://www.colmo.com.cn/index/laundry-machine-quanshiquanqu'
                                }
                            },
                            {
                                img: require('@/assets/images/type-2-more4.jpg'),
                                title: 'COLMO EVO系列S83油烟机',
                                callback: () => {
                                    window.location.href = 'https://www.colmo.com.cn/index/Range-hood-Evo-Series'
                                }
                            }
                        ]
                    }
                }
            ],
            tabCurrent: 0,
            isonLoad: false
        }
    },
    created () {
        if (isWeixinBrowser()) {
            wxJsSDK.wxConfig()
        }
    },
    mounted () {
        document.body.setAttribute('class', 'MYingHeiPRC-W4')
        this.isonLoad = true
    },
    methods: {
        onTapItem (index) {
            this.banner[this.tabCurrent][index].callback.call(this)
        },
        tabChange (index) {
            this.tabCurrent = index
        },
        onTapLive (index) {
            this.tabs[1].info.imgArr[index].callback.call(this)
        },
        onTapLiveMore (index) {
            this.tabs[1].info.more[index].callback.call(this)
        }
    }
}
</script>
<style lang="less" scoped>
.wrapper {
    background: #0e0e0e;
    min-height: 100vh;
    &.hide {
        opacity: 0;
    }
    &.show {
        opacity: 1;
    }
    .swipe_wrap {
        margin-bottom: 0.44rem;
    }
    .type_wrap_0 {
        width: 6.9rem;
        margin: 0.44rem auto 0;
        padding-bottom: 1rem;
        .c_card {
            margin-bottom: 0.78rem;
            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }
}
</style>
